import React from 'react'
import { Button, message, Modal} from 'antd'
import Table from '../../../components/Table'
import 'whatwg-fetch'
import API from '../../../axios/api'
import $ from 'jquery';
import { UserType, } from '../../../utils/system-data'
import { dateToString } from '../../../utils/utils'
import SearchBar from "../../../components/SearchBar";
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import dataTool from 'echarts/dist/extension/dataTool.js';
import './index.less'

import moment from 'moment';
import {withRouter,Redirect, Link} from "react-router-dom";
import {inject, observer} from "mobx-react";
require('es6-promise').polyfill();

@withRouter @inject('appStore') @observer
class SalesStatistics extends React.Component {
    constructor(props) {
        super(props)
        const {user, rudder, rudderList,defaultrudderId,defaultrudderName} = props.appStore
        const monthTime =  dateToString(new Date())

        this.state = {
            user: user,
            rudder: rudder,
            rudderList: rudderList,
            RudderId:defaultrudderId,
            defaultrudderName:defaultrudderName,
            HallId:'',
            initHallList:[],
            option:{},
            success:false,
            HallInfo:{}
        }
    }

    componentWillReceiveProps(nextProps){
        let {user, rudder, rudderList, defaultrudderId,defaultrudderName} = this.props.appStore

        this.setState({
            user: user,
            rudder: rudder,
            rudderList: rudderList,
            RudderId:defaultrudderId,
            defaultrudderName:defaultrudderName
        })
     }

    // 初始化班级
    initHallList =  async (rudderId) => {
        let _initHallList = []
        let rudderIdData = rudderId ? rudderId:this.state.RudderId
        let params = {
            ...API.config,
            RudderId: rudderIdData
        }
        await API.fetchHallPages(params).then((res) => {
            if(res.Code === 200) {
                res.Data.List && res.Data.List.map(item => _initHallList.push({value: item.Id, mean: item.HallName}))
                this.setState({
                    initHallList: _initHallList,
                })
            }
        })
    }
   
    componentWillMount() {
        this.initHallList()
    }

    componentDidMount() {
       
    }


    onSearch = (searchFields) => {
        if(!searchFields.RudderId && this.state.RudderId == '-'){
            message.error('请选择分舵！')
            return false;
        }
        if(!searchFields.HallId || searchFields.HallId == ''){
            message.error('请选择班级！')
            return false;
        }
        let HallId = searchFields && searchFields ? searchFields.HallId : '';
        let RudderId = searchFields && searchFields.RudderId ?  searchFields.RudderId : this.state.RudderId;
        this.setState({
            HallId:HallId,
            RudderId:RudderId
        })
        this.getHallInfo(HallId)
        this.getOtion(HallId)
    }
    getHallInfo = (HallId) =>{
      
        API.RudderGetHallInfo({HallId:HallId}).then((res) => {
            if(res.Code === 200) {
               this.setState({
                HallInfo:res.Data
               })
            }
        })
    }

    searchRudderChange = (v)=>{
        this.initHallList(v)
    }
    searchFields = () => {
        let _fields =[
        {
            title: '班级名称',
                key: 'HallId',
                type: 'select',
                items: () => this.state.initHallList,
        }]
        // if(this.state.user && this.state.user.UserRankType === UserType.ADMIN || this.state.user.RudderId == "-"){
        //     _fields = [{
        //         title: '分舵名称',
        //         key: 'RudderId',
        //         type: 'select',
        //         items: () => this.state.rudderList,
        //         onChange: this.searchRudderChange,
        //     }, ].concat(_fields)
        // }
        return _fields
    }

    getOtion = (HallId)=>{
        let that = this
        let url = 'http://flowbee.tuanzhangbang.com/java/netpage/getHallNetV2?hallId='+ HallId +'&showSize=30&showNameSize=6';
    
        $.get(url, function (xml) {
            var graph = dataTool.gexf.parse(xml);
            graph.nodes.forEach(function (node) {

                node.itemStyle = {
                    color: node.itemStyle.normal.color ? node.itemStyle.normal.color : '#A46AFF'
                };
                node.symbolSize = node.symbolSize ? node.symbolSize : 10;
                node.value = node.symbolSize;
                node.x = node.y = null;
                node.draggable = true;
            });

            let option = {
       
                'title': {
                    'show':false,
                    'top': 'bottom',
                    'left': 'right'
                },
        
                'toolbox': {
        
                    'show': false,
        
                    　　'feature': {
                        'type' :'jpeg',
                        'restore': true, // 还原，复位原始图表，
                    　　　　'saveAsImage': {
        
                        　　　　'show':false,
              
                        　　　　'excludeComponents' :['toolbox'],
        
        
                        　　　　}
        
                    　　}
        
                    },
                'legend': [{
                    // selectedMode: 'single',
                    // data: categories.map(function (a) {
                    //     return a.name;
                    // })
                }],
         
                'animation': false,
                'series' : [
                    {
                        'name': '',
                        'type': 'graph',
                        'layout': 'force',
                        'data': graph.nodes,
                        'links': graph.links,
                        'roam': true,
                        'label': {
                            'normal': {
                                fontSize:'10',
                                show:true,
                                position: 'right'
                            }
                        },
                        
                        'force': {
                            repulsion: 100
                        }
                    }
                ]
            };
            that.setState({
                option:option,
                success:true
            })
           
        })

        
    }

    render() {

        if(this.state.success && this.state.HallId != '' ){
            return (
                    <div id="wrap" style={{height: '80%', width: '100%',position:"relative"}}>
                        <SearchBar
                            onSubmit={this.onSearch}
                            fields={this.searchFields()}
                        />
                        <ReactEcharts
                        option={this.state.option}
                        style={{marginTop:'60px',height: '100%', width: '100%'}}
                        className='react_for_echarts' />

                        <div className="tip">
                            <div className="title">
                            所示为班级网络发展的实时动态图，为方便大家查看会根据班级粉丝数量做自动展示调整，具体规则如下：
                            </div>
                            <div className="decrition">
                            1、粉丝小于10000，单节点最多展示30个分支，带来粉丝大于6则显示昵称
                            </div>
                            <div className="decrition">
                            2、粉丝小于15000，单节点最多展示20个分支，带来粉丝大于10则显示昵称
                            </div>
                            <div className="decrition">
                            3、粉丝小于20000，单节点最多展示10个分支，带来粉丝大于20则显示昵称
                            </div>
                            <div className="decrition">
                            4、粉丝大于20000，单节点最多展示3个分支，带来粉丝大于30则显示昵称
                            </div>                          
                        </div>
                        <div className="hallinfo">
                        <div>
                            合伙人数：
                                <span style={{color:"rgb(61,139,255)"}}>{this.state.HallInfo.PartnerAmount}</span>
                            会员数：
                                <span style={{color:"rgb(255,122,122)"}}>{this.state.HallInfo.MemberAmount}</span>  
                            粉丝数：
                                <span style={{color:"#A46AFF"}}>{this.state.HallInfo.FansAmount}</span>
                        </div>
                           
                    </div>

                    </div>
                  
            )

        }
        return (
            <div id="wrap" style={{height: '80%', width: '100%',position:"relative"}}>
                <SearchBar
                    onSubmit={this.onSearch}
                    fields={this.searchFields()}
                />

                <div className="tip">
                    <div className="title">
                    所示为班级网络发展的实时动态图，为方便大家查看会根据班级粉丝数量做自动展示调整，具体规则如下：
                    </div>
                    <div className="decrition">
                    1、粉丝小于10000，单节点最多展示30个分支，带来粉丝大于6则显示昵称
                    </div>
                    <div className="decrition">
                    2、粉丝小于15000，单节点最多展示20个分支，带来粉丝大于10则显示昵称
                    </div>
                    <div className="decrition">
                    3、粉丝小于20000，单节点最多展示10个分支，带来粉丝大于20则显示昵称
                    </div>
                    <div className="decrition">
                    4、粉丝大于20000，单节点最多展示3个分支，带来粉丝大于30则显示昵称
                    </div>
                </div>              
            </div>
        )

        
    }
}
export default SalesStatistics
